{% load static %}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>
    <!-- url 参数 跳转 加密 -->
    <script src="{% static "crypto4.1.1js/crypto-js.js" %}"></script>


</head>

<body>
<!--搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="dataFrm">
    {% csrf_token %}
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">主机名:</label>
            <div class="layui-input-inline">
                <input type="text" name="host_name" id="host_name" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <button th:style=" ${#lists.contains(session.aclValue,'101005')}?'':'display:none'" type="button"
                    class="layui-btn  search_btn  layui-btn-normal layui-icon layui-icon-search select-btn"
                    id="search_btn">搜索
            </button>
            <button type="reset" class="layui-btn  layui-btn-warm    layui-icon layui-icon-refresh">重置</button>
        </div>

    </div>
    </div>
</form>
<!--搜索条件结束 -->
<!-- 数据表格开始 -->
<table class="layui-hide" id="allhostTable" lay-data="id:allhostTable" lay-filter="allhostTable"></table>

<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>

    <button class="layui-btn layui-btn-sm" id="allDelete" lay-event="allDelete">批量删除</button>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm " lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-primary layui-border-box layui-btn-sm " lay-event="webssh"><i
            class="layui-icon layui-icon-chart"></i> webssh连接</a>
</script>
<!-- 数据表格结束 -->

{% csrf_token %}
<script type="text/javascript">


    layui.use(['form', 'layer', 'table', 'laytpl', 'laydate', 'util'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,   // 引入jquery 语法
                laytpl = layui.laytpl,
                table = layui.table,
                laydate = layui.laydate,
                util = layui.util;


            //渲染数据表格 刚打开网页的时候 加载的
            table.render({
                elem: '#allhostTable'
                , url: "/selectAllHosts/"
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code,    //解析接口状态
                        "count": res.count,  //解析数据长度
                        "page": res.page,   //当前页
                        "limit": res.limit,  //当前页数据条数
                        "data": res.data,  //解析数据列表
                        "pages": res.pages
                    };
                }
                , response: {
                    statusCode: 200 //规定成功的状态码，默认：0
                }
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , page: true
                , id: 'table'
                , defaultToolbar: ['filter']
                , title: '主机数据表'
                , height: 'full-200'
                , cols:
                    [
                        [
                            {type: 'checkbox', fixed: 'left'}
                            // id  为数据库中字段名
                            , {field: 'id', title: 'id', width: 100, fixed: 'left', align: 'center', sort: true}
                            , {field: 'hostname', title: '主机名', width: 100, align: 'center'}
                            , {field: 'ip', title: 'ip', width: 200, align: 'center'}
                            , {
                            field: 'protocol', title: '协议', width: 100, align: 'center', templet: function (t) {
                                //如果是1则为管理员，颜色为红色；如果是0，则为非管理员，颜色为绿色
                                var is_protocol_num = t.protocol;
                                if (is_protocol_num == 1) {
                                    return "<span style='color:red'>ssh</span>"
                                } else if (is_protocol_num == 2) {
                                    return "<span style='color: #00FF00'>telnet</span>"
                                }
                            }
                        }
                            , {field: 'port', title: '端口', width: 100, align: 'center'}
                            , {field: 'remote_user_id', title: '用户名称(非机器登录名)', width: 200, align: 'center'}
                            , {field: 'create_time', title: '添加时间', width: 220, align: 'center'}
                            , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200, align: 'center'}
                        ]
                    ]

            });
            // 定时刷新，先不做，需要 弄一个 判断 机器是否在线  通过ping  暂时 不搞了

            //监听头部工具栏事件
            table.on("toolbar(allhostTable)", function (obj) {
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                    switch (layEvent) {
                        case "add":   // 添加主机
                            addHost();
                            break;

                        case 'allDelete':    // 批量删除
                            var checkStatus = table.checkStatus(obj.config.id)
                                , data = checkStatus.data; //获取选中的数据
                            //console.log(data)
                            if (checkStatus.data.length > 0) {  //有选择的的数据行
                                var ids = [];
                                //定义一个数组，用于存储选中行的id
                                //使用for循环将选中的数据信息保存在数组中
                                for (let i = 0; i < checkStatus.data.length; i++) {
                                    ids[i] = checkStatus.data[i].id;  // 注意这里的id 字段
                                }
                                //实践证明，在这里ajax是不能向后台发送数组数据的，所以需要对数据进行转换，可以转换成字符串
                                var idsString = ids.join(",");//分隔符，用啥分割，在后台就用啥拆分。
                                //console.log(idsString)
                                //现在数组已经拿到了数据，那我下来就是看能否将数组传递给后台进行删除，删除之前进行判断确认
                                layer.confirm("确认删除这" + checkStatus.data.length + "条数据吗？", {
                                    icon: 3,
                                    title: "删除提示"
                                }, function (index) {
                                    layer.open({
                                        title: '删除信息'
                                        , type: 1
                                        , closeBtn: false
                                        , area: '300px;'
                                        , shade: 0.8
                                        , id: 'LAY_layuipro'
                                        , btn: ['保存', '取消']
                                        , content: '是否删除'
                                        , success: function (layero) {
                                            var btn = layero.find('.layui-layer-btn');
                                            var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
                                            btn.find('.layui-layer-btn0').click(function () {
                                                $.ajax({
                                                    //几个参数需要注意一下
                                                    type: "post",  //方法类型
                                                    url: "/host_delete_all/",  // 跳转的url
                                                    data: {
                                                        "ids": idsString,
                                                        'csrfmiddlewaretoken': csrf_token
                                                    },
                                                    dataType: "json",
                                                    async: false,
                                                    traditional: true,
                                                    success: function (result) {
                                                        // console.log(result.code)
                                                        console.log(result)
                                                        if (result.code == 200) {
                                                            layer.msg("删除成功");
                                                            setTimeout(function () {
                                                                //重新加载当前页面
                                                                location.reload();
                                                            }, 1000);
                                                        } else (
                                                            layer.msg("删除失败")
                                                        )
                                                    }
                                                });
                                                //关闭弹出层页面
                                                layer.close(index);
                                            });
                                        }
                                    });
                                });
                            } else {
                                layer.msg("请选择删除的数据！");
                            }
                    }
                }
            );

            //添加用户
            function addHost(data) {
                var index = layui.layer.open({
                    title: "添加主机",
                    type: 2,
                    content: "/addhost/",
                    area: ["620px", "550px"],
                    maxmin: true,
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        setTimeout(function () {
                            layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        }, 100)
                    }
                })
            }


            //模糊查询
            $('.dataFrm .search_btn').on('click', function () {
                var host_name = $('#host_name').val();
                var user_name = $('#user_name').val();

                //执行重载
                if (host_name == "") {
                    layer.msg('查询全部数据', function () {
                        window.location = 'allhosts/';   //  这个地方的跳转 ，前面没有加 /  是因为 跳转的时候默认会在 前面加上 /index/
                    });
                } else {
                    table.reload('table', {
                        url: "/searchhost/"
                        , method: "get"
                        , where: {
                            "host_name": host_name,

                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    })
                }
            });

            // 工具条事件  就是操作那一栏
            table.on('tool(allhostTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                // console.log(data)
                if (layEvent === 'edit') { //编辑
                    //layer.alert('编辑行：<br>'+ JSON.stringify(data))
                    openUpdateUser(data, form);
                } else if (layEvent === 'webssh') {
                    webssh1(data, form);
                }
                ;
            });

            //打开修改页面
            // layer的弹出层打开之后，会回调一个success的方法，我们自定义这个方法，将我们要传递的数据渲染到子页面上.（实际上是在父页面上完成对子页面的数据渲染）
            function openUpdateUser(data, form) {
                var index = layui.layer.open({
                    title: "编辑主机",
                    type: 2,
                    content: "/updatehost/",
                    area: ["620px", "650px"],
                    shade: 0.4,
                    maxmin: true,
                    success: function (layero, index) {
                        var body = layui.layer.getChildFrame('body', index);
                        if (data) {
                            // console.log(data)
                            body.find(".hostname").val(data.hostname);
                            body.find(".ip").val(data.ip);
                            body.find(".port").val(data.port);
                            body.find(".protocol").val(data.protocol);


                            // 协议选择
                            body.find("input[name='protocol'][value='1']").prop("checked", data.protocol == "1" ? true : false);
                            body.find("input[name='protocol'][value='2']").prop("checked", data.protocol == "2" ? true : false);

                            // 是否 启用
                            body.find("input[name='enabledActive'][value='1']").prop("checked", data.enabled == "1" ? true : false);
                            body.find("input[name='enabledActive'][value='0']").prop("checked", data.enabled == "0" ? true : false);

                            body.find(".remoteuser_old").val(data.remote_user_id);

                            // 传输 用户的 id ，不能修改，使用input 的隐藏功能 type="hidden"
                            body.find(".id").val(data.id);
                            //console.log(data.id)

                            //  原始的方法
                            //body.find("input[name='sup_work_or_no'][title=" + data.is_superuser + "]").prop("checked", true)
                            //body.find("input[name='act_work_or_no'][title=" + data.is_active + "]").prop("checked", true)
                            // form.render()应该是在本页面渲染，我是传递给子页面，应该在子页面渲染 、子页面重新渲染
                            // https://blog.51cto.com/linzb/2839147
                            var iframeWindow = layero.find('iframe')[0].contentWindow;
                            iframeWindow.layui.form.render();
                        }
                        setTimeout(function () {
                            layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        }, 500)
                    }
                })
            }

            function webssh1(data, form) {
                // 获取 对应的 主机 信息
                // var ip = data.ip;
                // var port = data.port;
                var id = data.id;
                var remote_user_id = data.remote_user_id;
                //console.log(ip)
                //console.log(port)
                //console.log(remote_user_id)

                var r_user = ''
                var r_password = ''

                var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
                $.ajax({
                    //几个参数需要注意一下
                    type: "post",  //方法类型
                    url: "/websshup/",  // 跳转的url
                    data: {
                        "rusername": remote_user_id,
                        'csrfmiddlewaretoken': csrf_token
                    },
                    dataType: "json",
                    async: false,
                    traditional: true,
                    success: function (res) {

                        r_user = res.r_user;
                        r_password = res.r_password;
                        aseKey = res.aseKey;
                        var password_encrypt = CryptoJS.AES.encrypt(r_password, CryptoJS.enc.Utf8.parse(aseKey), {
                            mode: CryptoJS.mode.ECB,
                            padding: CryptoJS.pad.Pkcs7
                        }).toString();
                        location.href = "/webssh2/?hostid=" + id + '&r_user=' + r_user + '&r_password=' + password_encrypt + '&width=180&height=20';
                    },
                });
                //console.log(r_user)
                //console.log(r_password)
            }

        }
    )
    ;

</script>


<script src="{% static "webssh/bootbox/5.4.0/bootbox.min.js" %}"></script>
<!--script src="/static/xterm/4.4.0/xterm.min.js"></script-->
<script src="{% static "webssh/xterm/3.14.5/xterm.min.js" %}"></script>
<script src="{% static "webssh/zmodem/zmodem.devel.js" %}"></script>
<script src="{% static "webssh/webssh.js" %}"></script>
</body>
</html>
